<template>
  <div>
    <!-- 新建标签弹层 -->
    <el-dialog title="修改标签" :visible="showEditDialog" @close="btnoff">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item prop="subjectName" label="所属学科" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.subjectName" placeholder="请选择" @focus="getfocus">
            <!-- 遍历渲染下拉菜单 -->
            <el-option v-for="item,index in catalist" :key="index" :label="item.subjectName" :value="item.subjectID" />
          </el-select>
        </el-form-item>
        <!-- 输入框 -->
        <el-form-item prop="tagName" label="标签名称" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.tagName" placeholder="请输入标签名称" autocomplete="off" style="width:200px" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnoff">取 消</el-button>
        <el-button type="primary" @click="btnok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { gettaglist } from '@/api/subject'
import { edittags } from '@/api/subject'

export default {
  props: {
    showEditDialog: {
      type: Boolean,
      default: false
    }

  },

  data() {
    return {
      catalist: [],
      ruleForm: {},
      rules: {
        subjectName: [{ required: true, message: '所属科目不能为空', trigger: 'blur' }],
        tagName: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 点击取消或者叉号关闭弹层
    btnoff() {
      this.ruleForm = {
        subjectName: '',
        tagName: '',
        subjectID: '',
        id: ''
      }
      this.$refs.ruleForm.resetFields() // 重置校验结果
      this.$emit('update:showEditDialog', false)
    },
    // 点击确定按钮,调用修改标签接口，完成标签修改
    async btnok() {
      console.log(this.ruleForm)
      await edittags(this.ruleForm)
      this.$emit('edittags')
      this.$emit('update:showEditDialog', false)
      this.$message.success('修改成功')
    },
    // 获得复选框焦点的时候，调接口获取所属学科信息
    async getfocus() {
      const res = await gettaglist()
      console.log(res)
      const res2 = res.items
      console.log(res2, '---------------')
      this.catalist = res2
    }

  }
}

</script>

    <style lang="scss" scoped>

    </style>

